<template>
    <div id="box">
        <div class="box_lef">
            <div class="lef_router">
                <a class="spa1 active" @click="MyLef" ref="a">商品详情</a>
                <a class="spa2" @click="MyRig" ref="b">商品评价<span>(0)</span></a>
            </div>
            <div class="lef_introduce active" ref="introduce">
                <div class="lef_introduce_top">
                    <div>
                        <span class="spa1">适用年纪</span>
                        <span class="spa2">6-9岁、3-6岁、1-岁</span>
                    </div>
                    <div>
                        <span class="spa1">适用年纪</span>
                        <span class="spa2">6-9岁、3-6岁、1-岁</span>
                    </div>
                    <div>
                        <span class="spa1">适用年纪</span>
                        <span class="spa2">6-9岁、3-6岁、1-岁</span>
                    </div>
                    <div>
                        <span class="spa1">适用年纪</span>
                        <span class="spa2">6-9岁、3-6岁、1-岁</span>
                    </div>
                </div>
                <div class="lef_introduce_bottom">
                    <img v-lazy="item" alt="" v-for="item in img">
                </div>
                <div class="matters">
                    <h3>注意事项</h3>
                    <p class="tit">• 购买运费如何收取？</p>
                    <p> 单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
                    <br>
                    <p class="tit">• 使用什么快递发货?</p>
                    <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
                    <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
                    <br>
                    <p class="tit">• 如何申请退货?</p>
                    <p> 1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
                    <p> 2.内裤和食品等特殊商品无质量问题不支持退货；</p>
                    <p> 3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
                    <p> 4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。 </p>
                </div>
            </div>
            <div class="lef_evaluate" ref="evaluate">
                <div class="head">
                    <div class="head_data">
                        <div class="data_d1">
                            <p class="p1">1306</p>
                            <p class="p2">人购买</p>
                        </div>
                        <div class="data_d2">
                            <p class="p1">94.56%</p>
                            <p class="p2">好评率</p>
                        </div>
                    </div>
                    <div class="head_tags">
                        <p class="tags_p">大家都在说：</p>
                        <div class="tags_btn">
                            <a class="active">全部评价（832）</a>
                            <a>有图（832）</a>
                            <a>音质好（832）</a>
                            <a>充电快（832）</a>
                            <a>材质很软（832）</a>
                            <a>性价比高（832）</a>
                        </div>
                    </div>
                </div>

                <div class="screen">
                    <p class="spa1">排序：</p>
                    <a class="spa2 active">默认</a>
                    <a class="spa3">最新</a>
                    <a class="spa4">最热</a>
                </div>

                <div class="list" v-for="item in num">
                    <div class="list_item">
                        <div class="item_user">
                            <img src="https://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/avatar_1.png" alt="">
                            <span>大怨种</span>
                        </div>
                        <div class="item_body">
                            <div class="body_top">
                                <i></i><i></i><i></i><i></i><i></i>
                                <span>颜色：白色 尺寸：10cm 产地：美国</span>
                            </div>
                            <div class="body_txt">昨天下单，今天中午开锅就试着烧了五花肉，耗时30分钟，一切都刚刚好，比以前的锅烧出来口感汤汁都好多了，且价格实惠！建议购买！</div>
                            <div class="body_time">
                                <span>2021-04-03 13:20:32</span>
                                <span>
                                    <i></i>
                                    160
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="matters">
                    <h3>注意事项</h3>
                    <p class="tit">• 购买运费如何收取？</p>
                    <p> 单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费) </p>
                    <br>
                    <p class="tit">• 使用什么快递发货?</p>
                    <p>默认使用顺丰快递发货(个别商品使用其他快递）</p>
                    <p>配送范围覆盖全国大部分地区(港澳台地区除外）</p>
                    <br>
                    <p class="tit">• 如何申请退货?</p>
                    <p> 1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账； </p>
                    <p> 2.内裤和食品等特殊商品无质量问题不支持退货；</p>
                    <p> 3.退货流程： 确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成； </p>
                    <p> 4.因小兔鲜儿产生的退货，如质量问题，退货邮费由小兔鲜儿承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。 </p>
                </div>
            </div>
        </div>
        <div class="box_rig">
            <div class="rig_list">
                <h3>24小时热销榜</h3>
                <div>
                    <div v-for="item in TjImg">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.name}}</p>
                        <p class="p3">{{item.price}}</p>
                    </div>
                </div>
            </div>
            <div class="rig_list" style="margin-top:10px;">
                <h3>周热销榜</h3>
                <div>
                    <div v-for="item in TjImg">
                        <img v-lazy="item.picture" alt="">
                        <p class="p1">{{item.desc}}</p>
                        <p class="p2">{{item.name}}</p>
                        <p class="p3">{{item.price}}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        data(){
            return {
                img:[],
                TjImg:[],
                num:10,
            }
        },
        async mounted(){
            const res = await this.$.getGoods(this.$route.params);
            this.img = res.data.result.details.pictures
            for(var i=0; i<3; i++){
                this.TjImg.push(res.data.result.hotByDay[i])
            }
            console.log(res.data.result.similarProducts);
            console.log(this.TjImg)
        },
        methods:{
            MyLef(e){
                e.target.classList.add('active')
                let b = this.$refs['b'];
                b.classList.remove('active')
                this.$refs['introduce'].classList.add('active');
                this.$refs['evaluate'].classList.remove('active');
            },
            MyRig(e){
                e.target.classList.add('active')
                let a = this.$refs['a'];
                a.classList.remove('active')
                this.$refs['evaluate'].classList.add('active');
                this.$refs['introduce'].classList.remove('active');
            }
        }
    }
</script>

<style lang="less" scoped>
    #box{
        width:1240px;
        /*height:600px;*/

        /*border:1px solid black;*/
        margin:auto;
        display:flex;
        justify-content:space-between;
        font-size: initial;
        .box_lef{
            width:940px;
            height:auto;
            .lef_router{
                width:940px;
                height:70px;
                line-height:70px;
                border-bottom:1px solid #f5f5f5;
                font-size:18px;
                .spa1{
                    padding:0 40px;
                    display:inline-block;
                    border-right:1px solid #f5f5f5;
                    cursor: pointer;
                }
                .spa2{
                    padding:0 40px;
                    display:inline-block;
                    cursor: pointer;
                    span{
                        color:#cf4444;
                    }
                }
                .active{
                    border-bottom:2px solid #27ba9b;
                }
            }
            .lef_introduce{
                width:940px;
                padding:40px;
                display:none;
                .lef_introduce_top{
                    width:860px;
                    font-size:13px;
                    display:flex;
                    flex-wrap:wrap;
                    justify-content:space-between;
                    div{
                        width:430px;
                        height:30px;
                        span{
                            display:inline-block;
                        }
                        .spa1{
                            width:100px;
                            color:#9999B0;
                        }
                        .spa2{
                            width:330px;
                            color:#666666;
                        }
                    }
                }
                .lef_introduce_bottom{
                    margin-top:20px;
                    width:100%;
                    display:flex;
                    flex-wrap:wrap;
                    justify-content:flex-start;
                    img{
                        padding:0;
                        margin:0;
                        width:100%;
                    }
                }
                /*底部注意事项*/
                .matters{
                    width:940px;
                    height:500px;
                    font-size: initial;
                    margin-top:20px;
                    padding-bottom:40px;
                    h3{
                        height: 70px;
                        line-height: 70px;
                        border-bottom: 1px solid #f5f5f5;
                        padding-left: 50px;
                        font-size: 18px;
                        font-weight: 400;
                        margin-bottom: 10px;
                    }
                    .tit{
                        color: #333;
                    }
                    p{
                        width:940px;
                        height:40px;
                        line-height: 40px;
                        padding: 0 25px;
                        color: #666;
                        font-size:14px;
                    }
                }
            }
            .lef_evaluate{
                display:none;
                .head{
                    display:flex;
                    .head_data{
                        width:340px;
                        display: flex;
                        padding: 30px 0;
                        div{
                            width:150px;
                            text-align:center;
                            .p1{
                                height:45px;
                                font-size:32px;
                                color: #cf4444;
                            }
                            .p2{
                                width:150px;
                                font-size:14px;
                                color:#999;
                            }
                        }
                    }
                    .head_tags{
                        width:600px;
                        display:flex;
                        .tags_p{
                            font-weight: 700;
                            width: 100px;
                            text-align: right;
                            line-height: 42px;
                        }
                        .tags_btn{
                            flex: 1;
                            display: flex;
                            flex-wrap: wrap;
                            a{
                                width: 132px;
                                height: 42px;
                                margin-left: 20px;
                                margin-bottom: 20px;
                                border-radius: 4px;
                                border: 1px solid #e4e4e4;
                                text-align: center;
                                line-height: 40px;
                                font-size:14px;
                                color: #999;
                                cursor: pointer;
                            }
                            a:hover{
                                border-color:#27ba9b;
                                color:#27ba9b;
                                background: #e6faf6;
                            }
                            .active{
                                border-color: #27ba9b;
                                background: #27ba9b;
                                color: #fff;
                            }
                        }
                    }
                }
                .screen{
                    width:940px;
                    height:60px;
                    line-height: 60px;
                    margin: 0 20px;
                    color: #666;
                    border-top:1px solid #f5f5f5;
                    border-bottom:1px solid #f5f5f5;
                    font-size:14px;
                    .spa1{
                        display:inline;
                        padding-left:20px;
                    }
                    a{
                        cursor: pointer;
                    }
                    .spa2{
                        padding-left:20px;
                        color:#333;
                    }
                    .spa3{
                        padding-left:20px;
                        color:#333;
                    }
                    .spa4{
                        padding-left:20px;
                        color:#333;
                    }
                    a:hover{
                        color: #27ba9b;
                    }
                    .active{
                        display:inline;
                        color: #27ba9b;
                    }
                }
                .list{
                    width:940px;
                    padding: 0 20px;
                    user-select: none;
                    color: #333;
                    /*border:1px solid black;*/
                    .list_item{
                        padding: 25px 10px;
                        border-bottom: 1px solid #f5f5f5;
                        display:flex;
                        .item_user{
                            width:160px;
                            display:flex;
                            img{
                                width:40px;
                                height:40px;
                                border-radius: 50%;
                                overflow: hidden;
                            }
                            span{
                                padding-left: 10px;
                                color: #666;
                                font-size:14px;
                            }
                        }
                        .item_body{
                            width:720px;
                            font-size:14px;
                            color:#666;
                            .body_top{
                                width:720px;
                                height:40px;
                                span{
                                    padding-left:10px;
                                }
                            }
                            .body_txt{
                                width:720px;
                            }
                            .body_time{
                                width:720px;
                                margin-top:5px;
                                display:flex;
                                justify-content:space-between;
                            }
                        }
                    }
                }
                .matters{
                    width:940px;
                    height:500px;
                    font-size: initial;
                    margin-top:20px;
                    padding-bottom:40px;
                    h3{
                        height: 70px;
                        line-height: 70px;
                        border-bottom: 1px solid #f5f5f5;
                        padding-left: 50px;
                        font-size: 18px;
                        font-weight: 400;
                        margin-bottom: 10px;
                    }
                    .tit{
                        color: #333;
                    }
                    p{
                        width:940px;
                        height:40px;
                        line-height: 40px;
                        padding: 0 25px;
                        color: #666;
                        font-size:14px;
                    }
                }
            }
            .active{
                display:block;
            }
        }
        .box_rig{
            width:280px;
            /*border:1px solid black;*/
            .rig_list{
                h3{
                    width:280px;
                    height:70px;
                    line-height:70px;
                    padding-left:25px;
                    background: #e26237;
                    color:#ffffff;
                    font-size:18px;
                    margin-bottom:10px;
                }
                div{
                    div{
                        width:280px;
                        padding:20px 30px;
                        text-align:center;
                        /*border:1px solid black;*/
                        img{
                            width:200px;
                            height:200px;
                        }
                        p{
                            width:200px;
                            overflow:hidden;
                            white-space:nowrap;
                            text-overflow:ellipsis;
                        }
                        .p1{
                            color:#333333;
                            font-size:16px;
                            margin-top:10px;
                        }
                        .p2{
                            color:#999999;
                            font-size:14px;
                            margin:10px 0;
                        }
                        .p3{
                            color:#cf4444;
                            font-size:20px;
                        }
                    }
                }
            }
        }
    }
</style>